<template>
  <el-dialog title="设置对象-部门" :close-on-click-modal="false" :visible.sync="visible" @close="clearDataList()" width="800px" top="8vh">
    <div align="right" style="margin-bottom:10px;">
      <el-button type="primary" plain v-if="permissions.ceping_cepinghzglb_add" @click="addRemarkObject()">设置部门</el-button>
    </div>
    <el-container>
      <el-main style="max-height:55vh">
    <el-table :data="dataForm" stripe>
      <el-table-column label="部门名称" prop="deptName"></el-table-column>
      <el-table-column label="排序号" prop="bhzPx">
        <template slot-scope="scope">
          <div v-if="!scope.row.upSort" class="flex alignItemsCenter">
            <label style="margin-right:10px">{{scope.row.bhzPx}}</label>
            <el-button type="text" @click="editSotr(scope.row,scope.$index,true)">编辑</el-button>
          </div>
          <div v-else class="flex alignItemsCenter">
            <el-input-number v-model="pbcpPx" :min="1" :max="10000" style="margin-right:10px"></el-input-number>
            <el-button type="primary" plain @click="updateSort(scope.row.id,scope.$index)">保存</el-button>
            <el-button type="danger" plain @click="editSotr(scope.row,scope.$index,false)">取消</el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作"  width="100">
        <template slot-scope="scope">
          <el-button type="danger" plain v-if="permissions.ceping_cepinghzglb_del" @click="deleteHandleDxpz(scope.row.id)">
            删除</el-button>
        </template>
      </el-table-column>
    </el-table>
      </el-main>
    </el-container>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" plain @click="visible = false">取消</el-button>
      <!--<el-button type="primary" @click="dataFormSubmit()" v-if="canSubmit">确定</el-button>-->
    </span>
    <!-- 选择部门 -->
    <dept-comment v-if="deptCommentShow" ref="deptComment" @showRemarkList="getDxpzbList"></dept-comment>
  </el-dialog>
</template>

<script>
/*!
 * 绩效考核-测评统计设置对象-部门
 *
 * @author linh
 * @date 2021-07-08 17:40:00
 */
import { addObj, selHzBmList, savelist, putObj, delObj } from '@/api/ceping/cepinghzgldxpzb'
import { mapGetters } from 'vuex'
import deptComment from './deptcomment'

export default {
  components: {
    deptComment
  },
  data() {
    return {
      visible: false,
      canSubmit: false,
      pbcpPx: '',
      hzId: '',
      deptCommentShow: false,
      dataForm: [
        {
          deptName: '',
          deptId: '',
          bhzPx: '',
          // upSort : ''
        }
      ]
    }
  },
  computed: {
    ...mapGetters(['permissions'])
  },
  methods: {
    //初始化
    csh() {
      this.dataForm = [];
    },
    init(id) {
      this.hzId = id;
      this.csh();
      this.visible = true;
      this.canSubmit = true;

      this.$nextTick(() => {
        this.getDxpzbList();
      });
    },
    //取得数据
    getDxpzbList() {
      selHzBmList(this.hzId).then(res => {
        this.dataForm = res.data.data;
      })
    },
    // 表单提交
    dataFormSubmit() {
      this.canSubmit = false;
      savelist(this.dataForm).then(data => {
        this.$notify.success('保存成功')
        this.visible = false
        this.$emit('refreshDataList')
      }).catch(() => {
        this.canSubmit = true;
      });
    },
    //清空数据
    clearDataList() {
      this.dataForm = [];
      this.deptCommentShow = false;
    }
    ,//新增被测评对象
    addRemarkObject() {
      this.deptCommentShow = true;
      this.$nextTick(() => {
        this.$refs.deptComment.init(this.hzId);
      });
    },
    //编辑排序
    editSotr(pRow, subIndex, isUp) {
      if (isUp) {
        // this.$set(this.dataList[pIndex].bcpmxbsubList[subIndex], 'upSort', isUp);
        this.$set(this.dataForm[subIndex], 'upSort', isUp);
        this.pbcpPx = pRow.bhzPx;

      } else {
        this.pbcpPx = 1;
        // this.$set(this.dataList[pIndex].bcpmxbsubList[subIndex], 'upSort', isUp);
        this.$set(this.dataForm[subIndex], 'upSort', isUp);
      }
    },
    //更新排序
    updateSort(id, index) {
      const tempData = this.dataForm[index];
      tempData["bhzPx"] = this.pbcpPx;

      putObj(tempData).then(res => {
        this.pbcpPx = 1;
        this.getDxpzbList();
        this.$notify.closeAll();
        this.$notify.success("修改成功");
      }).catch(() => {
        this.$notify.error("数据错误")
      });
    },
    //单个删除
    deleteHandleDxpz(id) {
      delObj(id).then(res => {
        this.$notify.success("删除成功");
        this.getDxpzbList();
      }).catch(() => {
        this.$notify.error("删除错误")
      })
    }

  }
}
</script>
